<?php //print_r($params);?>
<style>
#list_city li{
	cursor:pointer;
}
#txt-Weather{
	font-weight:bold;
	color:#930;
}
#txt-City{
	font-weight:bold;
}
#list_city{
/*	display:none;*/
}
</style>


<div id="boxweather">
	<div class="weather">
    	
    	<span id="img-Do" class="spanNumDo">
        </span>
        <span id="txt-Weather" class="txt-Weather"></span>
        <div id="txt-City" style="cursor: pointer;"></div>
    </div>
    <ul id="list_city">
    </ul>
</div>

<div class="goldContent">
	
</div>
<script type="text/javascript">
var data_w;
	$data = [];
	$str = '{{str_data}}'.split(',');

	for($i=0;$i<$str.length; $i++){
		$data.push($str[$i]);
	}

if($str!="")
	$.ajax({
		url:'http://vnexpress.net/block/crawler',
		data:{arrKeys:$data},
		dataType:'json',
		success: function(data){
			if(!data.thoi_tiet)
				return;
			else{
				data_w = data;
				var thoi_tiet = data.thoi_tiet;
				var list_city = $('ul#list_city');
				$list = "";
				$.each(thoi_tiet,function(obj,index){
					$list += "<li rel=\""+obj+"\">"+index.city_name+"</li>";
				});
				list_city.append($list);
				get_Weather();
				$('#list_city li:first').click();
			}
			//gia vang
			if(!data.gia_vang)
				return;
			else{
				$con = $('.goldContent');
				$con.append('<div class="unitGold">ĐVT: tr.đ/lượng</div><table id="gia_vang_app">'+
				'<thead><tr><td>Loại</td><td>Mua</td><td>Bán</td></tr></thead>'+
	        	'<tbody></tbody></table>');
				var gia_vang_app = $('table#gia_vang_app tbody');
				$.each(data.gia_vang,function(obj,index){
					$tr = '<tr><td>'+index.name+'</td><td>'+index.buy+'</td><td>'+index.sell+'</td></tr>';
					gia_vang_app.append($tr);
				});
			}
		}
	});
</script>

<script type="text/javascript">
var json_data;
function get_Weather(){
	$('#list_city li').click(function(){
		$(this).siblings('li').show();
		$(this).hide();
		//$t = '26';
		//alert($t[0]);
		
		$id = $(this).attr('rel');
		json_data = data_w.thoi_tiet[$id];
		
		var img_app = $('#img-Do');
		$imgs = '<img src="http://st.f1.vnecdn.net/i/v101/weather/'+json_data.weather_code+'.gif">';
		for($i=0;$i<json_data.temp.length;$i++){
			$imgs += '<img src="http://st.f1.vnecdn.net/i/v101/weather/'+json_data.temp[$i]+'.gif">';
		}
		
		$imgs += '<img src="http://st.f1.vnecdn.net/i/v101/weather/c.gif">';
		img_app.html('').append($imgs);
		
		$('#txt-Weather').html('').append(json_data.weather);
		$('#txt-City').text($(this).text());
	});
	
	$('#txt-City').click(function(){
		//$('#list_city').slideToggle();
	});
}


</script>
